<template>
    <div class="ml-16px mr-16px content-container">
        <div class="pl-36px pt-26px pr-26px text-14px font-bold level-2-title">
            1.选择账号
        </div>
        <div class="pl-26px pt-16px pr-26px">
            <Tabs v-model="activeIndex" @update:model-value="handleTabClick" active-color="#ffffff">
                <TabItem label="企业宣传" path="" :index="0">
                    <el-row :gutter="12" class="mt-10px sg-account">
                        <el-col :span="6" v-for="item in state.propagandas" :key="item.id">
                            <div class="flex justify-between items-center item">
                                <div class="flex flex-col justify-center">
                                    <b>{{ item.name }}</b>
                                    <p>{{ item.desc }}</p>
                                </div>
                                <el-button>查看示例</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </TabItem>
                <TabItem label="产品宣传" path="" :index="1">
                    <el-row :gutter="12" class="mt-10px sg-account">
                        <el-col :span="6" v-for="item in state.products" :key="item.id">
                            <div class="flex justify-between items-center item">
                                <div class="flex flex-col justify-center">
                                    <b>{{ item.name }}</b>
                                    <p>{{ item.desc }}</p>
                                </div>
                                <el-button>查看示例</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </TabItem>
                <TabItem label="人物采访" path="" :index="2">
                    <el-row :gutter="12" class="mt-10px sg-account">
                        <el-col :span="6" v-for="item in state.peoples" :key="item.id">
                            <div class="flex justify-between items-center item">
                                <div class="flex flex-col justify-center">
                                    <b>{{ item.name }}</b>
                                    <p>{{ item.desc }}</p>
                                </div>
                                <el-button>查看示例</el-button>
                            </div>
                        </el-col>
                    </el-row>
                </TabItem>
            </Tabs>
        </div>
        <div class="flex items-center pl-36px pt-26px pr-26px text-14px font-bold level-2-title">
            2.视频脚本<div class="text-12px text-#999 font-normal ml-15px">企业拍摄宣传片根据拍摄目的和地点给出的标准参考用语，商家拍摄视频，视频内容和话术模板</div>
        </div>
        <div class="pt-5px pb-5px pl-26px pr-26px">
            <el-divider content-position="left">通用脚本</el-divider>
        </div>
        <div class="pl-26px pr-26px pb-26px">
            <el-row :gutter="12" class="video-jb">
                <el-col :span="8">
                    <div class="item">
                        <div class="pt-20px pb-20px text-14px font-bold">企业相关1</div>
                        <div class="demo-collapse">
                            <el-collapse v-model="activeName" accordion>
                                <el-collapse-item :title="item.name" :name="item.id" v-for="item in state.enterpriseRelated" :key="item.id">
                                    <div>
                                        {{ item.desc }}
                                    </div>
                                </el-collapse-item>
                            </el-collapse>
                        </div>
                    </div>

                </el-col>
            </el-row>
        </div>
    </div>
</template>

<script setup lang="ts">
import Tabs from '@/components/Tab/First.vue'
import TabItem from '@/components/Tab/Item.vue'

const activeIndex = ref(0)

const activeName = ref('1')

const state = reactive({
    propagandas:[
        {
            id:1,
            name:'公司前台',
            desc:'前台介绍公司/微笑、礼貌打招乎'
        },
        {
            id:2,
            name:'办公环境',
            desc:'介绍各部门办公区域、娱乐设施、休息区'
        },
        {
            id:3,
            name:'企业文化墙',
            desc:'介绍企业文化宣传语、发展历程'
        },
        {
            id:4,
            name:'荣誉资质',
            desc:'介绍各种重要奖项证书'
        },
        {
            id:5,
            name:'老板办公室',
            desc:'介绍一些重要物品'
        },
        {
            id:6,
            name:'生产车间',
            desc:'介绍不同产品生产线及生产产品、环境等'
        },
        {
            id:7,
            name:'仓库展示',
            desc:'介绍仓库的货物摆放数量及热卖出库的数量'
        },
        {
            id:8,
            name:'主营业务',
            desc:'介绍公司主要经营哪些业务及产品等'
        },
    ],
    products:[
        {
            id:1,
            name:'产品介绍',
            desc:'介绍产品有哪些作用及优势，产品怎么操作使用（多个产品可拍摄多个视频）'
        },
        {
            id:2,
            name:'产品分类',
            desc:'介绍公司不同产品及不同介绍用途（多个产品可拍摄多个视频）'
        },
        {
            id:3,
            name:'应用场景',
            desc:'介绍不同产品应用到相应的场景（多个产品可拍摄多个视频）'
        },
        {
            id:4,
            name:'产品展示',
            desc:'多角度展示产品的特点或卖点（多个产品可拍摄多个视频）'
        },
    ],
    peoples:[
        {
            id:1,
            name:'老板专访',
            desc:'老板的创业历程公司的战略目标公司未来的方向与同行业相比，有什么优势?'
        },
        {
            id:2,
            name:'客户反馈',
            desc:'客户购买或使用产品后好评反馈及效果'
        },
        {
            id:3,
            name:'员工采访',
            desc:'你是什么时候加入公司的?你为什么选择公司？来了公司，最大的变化？有什么想对公司说的？'
        },
    ],
    enterpriseRelated:[
        {
            id:1,
            name:'企业简介',
            desc:'xxxxx科技有限公司，简称xx（xxx），公司成立于xxxx年，坐落于中国xx之都——xxx市，旗下共有两大品牌，xxxx和xxxx，是一家集设计、研发、生产xx设备和xx应用解决方案（包括智能系统和程序开发）的制造型企业'
        }
    ]
})

function handleTabClick(val:any) {
    activeIndex.value = val.index
}
</script>

<style lang="scss" scoped>
.sg-account {
    .item{
        border-radius: 4px;
        height: 80px;
        padding: 0 16px;
        background-color:var(--mainBg);
        margin-top: 12px;
        b{
            font-size: 14px;
        }
        p{
            font-size: 14px;
            color: #999999;
            margin-top: 10px;
            line-height: 1.2;
            padding-right: 10px;
        }
    }
}

.video-jb {
    .item{
        border-radius: 4px;
        padding: 0 16px 16px;
        background-color:var(--mainBg);

    }
}
:deep(.el-collapse-item__header){
    background-color:var(--mainBg);
}
:deep(.el-collapse-item__wrap){
    background-color:var(--mainBg);
}
</style>